<template>
  <div class="com-container">
    <div class="box1">
      <div class="box1-sdf">boxsdf</div>
    </div>
    <h1 class="font1">font1</h1>
    <h2 class="font2">font2</h2>
    <div class="box2">divdiv</div>
    <div class="box3">box3</div>
    <p>njb jnuj</p>
    <div class="border-1">11zhnfiogv</div>
    <div class="border-2">22vihknfiov</div>
    <div class="border-3">33viiov</div>
    <div class="border-4">44zv;hui</div>
    <div class="box4">svjnslv</div>
  </div>
</template>

<script>
export default {
  name: "Com",
  data() {
    return {
        isShow:true
    };
  },
};
</script>

<style lang="scss">
@import"../style/sass";
$color1: pink;
$side: left;
.com-container {
    background-color:$miss;
  .box1 {
    border: solid 20px $color1;
    border-#{$side}: solid 20px block;
    &-sdf {
      width: 100px;
      height: 100px;
      background-color: salmon;
    }
    &:hover {
      background-color: slateblue;
    }
  }
  .font1 {
    font-size: 30px;
    color: red;
    background-color: yellow;
  }
  .font2 {
    @extend .font1;
    background-color: blue;
  }
  @mixin boxStyle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
  }
  .box2 {
    @include boxStyle;
    color: block;
    background-color: tan;
  }
  @mixin marginStyle($val: 50px) {
    margin-top: $val;
  }
  .box3 {
    @include marginStyle();
    background-color: red;
    height: 30px;
  }
  p {
    color: lighten(#000, 10%);
    @if 3 < 2 {
      font-size: 30px;
    } @else if 3 < 4 {
      font-size: 40px;
    } @else {
      font-size: 100px;
    }
  }
  @for $i from 1 to 5{
      .border-#{$i}{
          width:#{$i}00px;
          height:100px;
          margin:10px;
          font-size:#{$i}0px;
      }
  }

    $y: 4;
    @while $y > 0 {
        .border-#{$y}{
            border:solid #{$y}0px #333;
        }
    $y: $y - 1;
    }
    @each $z in 1,2,3,4{
        .border-#{$z}{
            height:#{$z}00px;
        }
    }
    @function add ($val){
        @return $val + 100px;
    }
    .box4{
        height:add(20px);
        background-color:orange;
    }
}
</style>
